<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            width: 100%;
            font-family: fantasy;
            font-size: 13px;
        }

        h1 {
            text-align: center;
        }

        #myDiv {
            margin-top: 50px;
            width: 100%;
            text-align: center;
        }

        table {
            margin-left: auto;
            margin-right: auto;
        }

    </style>
    <script src="/js/jquery-1.8.0.min.js"></script>
</head>
<body>

<h1>Server Status</h1>

<div style="margin:50px auto; text-align: center;">
    <tr>
        <td width="150" align=right>IP&nbsp&nbsp&nbsp :</td>
        <td width="150"><input id="ip" name="ip" type="text"></td>
        <td width="150">
            <button type="button" id="search" onclick="onClick()">查询</button>
        </td>
    </tr>
</div>

<div id="myDiv">
    <table cellspacing="10" cellpadding="0" width="900" id="myTab">

        <tr align=center>
            <td width="150" align="center">IP</td>
            <td width="150" align="center">Total</td>
            <td width="150" align="center">IOS</td>
            <td width="150" align="center">Android</td>
            <td width="150" align="center">packetDrop</td>
            <td width="150" align="center">packetDropThreshold</td>
        </tr>
    </table>
</div>
<script>
    var serviceData;

    function handleData(processCount) {
        var result;
        if (processCount.length > 0) {
            result = {
                total: 0,
                android: 0,
                ios: 0,
                packetDrop: 0,
                packetDropThreshold: 0

            };
            for (var i = 0; i < processCount.length; i++) {
                result.total += processCount[i].count.total;
                result.android += processCount[i].count.android;
                result.ios += processCount[i].count.ios;
                result.packetDrop += processCount[i].packetDrop;
                result.packetDropThreshold += processCount[i].packetDropThreshold;
            }
            return result;
        }
    }

    function loadQueryData() {
        $.ajax({
            type: 'GET',
            url: '/api/stats/base',
            success: function (data) {
                serviceData = data.processCount;
                var ip = getQueryString("ip");
                if(!ip) {
                    showPage(serviceData);
                }else{
                    filter(ip);
                }
            }
        });
    }

    function onClick() {
        var ip = $("#ip").val();
        if (ip == "") {
            showPage(serviceData);
        } else {
            filter(ip);
        }
    }

    function filter(ip) {
        var results = [];
        for (var i = 0; i < serviceData.length; i++) {
            if ((serviceData[i].id).substring(0, ip.length) == ip) {
                results.push(serviceData[i]);
            }
        }
        showPage(results);
    }

    function showPage(data) {
        $("#myTab").empty();
        $("#myTab").append("<tr align=left>  " +
        "<td width='150' align='center'>IP</td> " +
        "<td width='150' align='center'>Total</td> " +
        "<td width='150' align='center'>IOS</td> " +
        "<td width='150' align='center'>Android</td>" +
        "<td width='150' align='center'>packetDrop</td>" +
        "<td width='150' align='center'>packetDropThreshold</td>" +
        "</tr>");

        var result = handleData(data);
        if (result) {
            $("#myTab").append("<tr align=left>  " +
            "<td width='150' align='center'>总计</td> " +
            "<td width='150' align='center'>" + result.total + "</td> " +
            "<td width='150' align='center'>" + result.ios + "</td> " +
            "<td width='150' align='center'>" + result.android + "</td>" +
            "<td width='150' align='center'>" + result.packetDrop + "</td>" +
            "<td width='150' align='center'>" + result.packetDropThreshold + "</td>" +
            "</tr>");
        }

        for (var i = 0; i < data.length; i++) {
            $("#myTab").append("<tr align=left>  " +
            "<td width='150' align='center'>" + data[i].id + "</td> " +
            "<td width='150' align='center'>" + data[i].count.total + "</td> " +
            "<td width='150' align='center'>" + data[i].count.ios + "</td> " +
            "<td width='150' align='center'>" + data[i].count.android + "</td>" +
            "<td width='150' align='center'>" + data[i].packetDrop + "</td>" +
            "<td width='150' align='center'>" + data[i].packetDropThreshold + "</td>" +
            "</tr>");
        }
    }

    window.onload = function () {
        loadQueryData();
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>

</body>
</html>